<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帧动画</title>
</head>
<style>
    div{width:50px;height:50px;background-color: yellow; border-radius: 50%;animation: localAnmi 2s ease 0ms infinite;}
/* div{width:50px;height:50px;background-color: yellow; border-radius: 50%;} */
/* div{width:200px;height:50px;animation-name: myfirst; animation-duration: 5s;background-color: yellow;} */
@keyframes myfirst{
    0%{
        background-color: white;
        transform: rotate(0deg);
    }
    100%{
        background-color: blue;
        transform: rotate(90deg);
    }
}
@keyframes localAnmi {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
</style>
<body>
    

    <div id="ad">ad</div>
   
    <button onclick="animationClick()">点我</button>

    <script>
        function animationClick(){
            let ad = document.getElementById("ad");
            ad.style.animationName = "myfirst";
            ad.style.animationDuration = "5s";
            ad.style.animationFillMode = "forwards";
            ad.style.animationIterationCount= 1;
        }
    </script>

</body>
</html>